﻿<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body>
    <div id="globus" style="width:100%;height:100%"></div>

    <div style="position:absolute; left:0; background-color:white;">
        <div style="padding:15px; display: inline-block;">
            <b>Height factor:</b>
            <select id="heightFactor">
                <option value="0">0</options>
                    <option value="1" selected>1</options>
                        <option value="3">3</options>
                            <option value="5">5</options>
                                <option value="10">10</options>
                                    <option value="18">18</options>
            </select> &nbsp&nbsp&nbsp
            <b>Level of Detail:</b>
            <select id="lodRatio">
                <option value="0.8">Low</option>
                <option value="1.12" selected>Normal</option>
                <option value="1.8">Hight</option>
                <option value="2.4">Very Hight</option>
            </select>
        </div>
    </div>

    <script type="module">
        'use strict';

        import { Globe } from '../../src/og/Globe.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';

        document.getElementById("heightFactor").onchange = function () {
            globus.planet.setHeightFactor(parseFloat(this.value));
        };

        document.getElementById("lodRatio").onchange = function () {
            globus.planet.setRatioLod(parseFloat(this.value));
        };

        let osm = new XYZ("OpenStreetMap", {
            isBaseLayer: true,
            url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            visibility: true,
            attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });

        let globus = new Globe({
            "target": "globus",
            "name": "Earth",
            "terrain": new GlobusTerrain(),
            "layers": [osm]
        });

        globus.planet.viewExtentArr([-10, 35, 54, 40]);
    </script>
</body>

</html>